import React, { PropTypes } from 'react';
import TweenOne from 'rc-tween-one';

import QueueAnim from 'rc-queue-anim';

import { connect } from 'react-redux';
import { closeMask } from '../action/mask';
import { getChilden } from '../reducers/mask';

import {Icon, Switch, Popover, Button, Modal, Form, Input, message, Row, Col, DatePicker, Cascader,Upload,} from 'antd';

import './less/mask.less';

class Mask extends React.Component {
  static contextTypes = {
      initShow:React.PropTypes.bool,
      closeCallback:React.PropTypes.func
  };

  static defaultProps = {
      initShow:false,
      closeCallback:()=>{},

  };

  constructor(props){
    super(props);
    this.state = {
        contentShow:true,
        maskStatus:this.props.maskStatus
    }
  }


  handleClick(e){
      this.setState({
        contentShow:false
      })
      setTimeout(()=>{
        this.props.closeMask();
        this.setState({
            contentShow:true
        })
      },500);
  }

  componentWillUnmount(){

  }

  render() {
    let _content = this.state.contentShow?
    [
        <div className="mask-container" key='maskdemo'>
          {this.props.component}
        </div>
    ]:null;
    let _compent = this.props.maskStatus?
      <div>
        <div className='mask' onClick={this.handleClick.bind(this)}>
        </div>
        <QueueAnim
          animConfig={{opacity:[1, 0],right:[0, '-100%']}}
          duration = {1000}
        >
          {_content}
        </QueueAnim>
      </div>:null;
    return _compent;
  }
}

const mapStateToProps = (state) => {
  return {
    maskStatus: state.mask.maskStatus,
    component: state.mask.component
  }
}

export default connect(
  mapStateToProps,
  { closeMask }
)(Mask)
